<template>
	
	<!-- 时间段筛选 -->
	<div class="time-date" @click="state.showCalendar = true">
		{{ state.renderDate }}
		<img src="../../static/svg/down-or.svg" mode="">
	</div>
	
	<van-calendar
	  v-model:show="state.showCalendar"
	  type="range"
	  :min-date="state.minCalendar" 
	  :max-date="state.maxCalendar"
	  @close="onClose"
	  @confirm="onConfirm"
	  color="#D76A2C"
	  :allow-same-day="true"
	/>
</template>

<script setup>
	import { getcurrentTime } from '@/utils/function.js'
	
	const props = defineProps()
	const emits = defineEmits(['update:modelValue'])
	
	const computedDate = (time) => {
		const date = new Date(time)
		let year = date.getFullYear()
		let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1 
		let days = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
		return year + '/' + month  + '/' + days
	}
	
	const state = reactive({
		showCalendar: false,
		minCalendar: new Date(2019, 0, 1),
		maxCalendar: new Date(),
		renderDate: '',
		Date: '',
	})
	
	const onClose = (val) => {
		state.showCalendar = false
	}
	
	const onConfirm = (val) => {
    
		let start = getcurrentTime(val[0], 'day', false)
		let end = getcurrentTime(val[1], 'day', false)
		
		// if(start == end) {
		// 	state.renderDate = computedDate(start)
		// 	state.query.Date = start
		// } else {
			state.renderDate = computedDate(start) + '-' + computedDate(end)
			state.Date = start + ',' + end
		// }
		emits('update:modelValue', state.Date)
		state.showCalendar = false
	}
	
	onMounted(() => {
		let time = new Date()
		let Y = time.getFullYear(); //获取系统的年；
		let M = time.getMonth() + 1; //获取系统月份，由于月份是从0开始计算，所以要加1
		M = M < 10 ? '0' + M : M
		
		state.Date = getcurrentTime(time.getTime(), 'month', true)
		state.renderDate =	`${Y}/${M}/01-${ computedDate(time.getTime()) }`
		emits('update:modelValue', state.Date)
	})
	
</script>

<style>
</style>